<template>
  <div ref="chart" class="echart" ></div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    list: {
      type: Array,
    },
  },
  data() {
    return {
       fontSize:16,
      padding:false,
    };
  },

  methods: {
    ScreenWidth(){
     
          if (screen.width <= 1920){
              this.fontSize=12;
              this.padding=false;
          }else{
             this.fontSize=14;
              this.padding=true;
          }
 },
    drawLine(n) {
      var that = this;
      const chart = this.$refs.chart;
     this.ScreenWidth();
      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(chart); //推荐
      let xdata = [];
      let series = [];
      n.xAxis_data.length &&
        n.xAxis_data.map((item) => {
          xdata.push(item.substring(5));
        });
      let colors = [
        "rgb(0, 210, 255)",
        "rgb(255, 246, 131)",
        "rgb(231, 144, 149)",
        "rgb(143, 107, 254)",
      ];
      n.series.length &&
        n.series.map((item, i) => {
          series.push({
            name: item.name,
            type: "line",

            // areaStyle: {},
            emphasis: {
              focus: "none",
            },
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#5470C6",
              width: 3,
            },

            itemStyle: {
              normal: {
                color: colors[i], //折点颜色
                lineStyle: {
                  color: colors[i], //折线颜色
                },
              },
            },
            data: item.data,
          });
        });
      let options = {
        title: {
          text: this.title,
          left: "left",
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
            fontSize: that.padding?23:that.fontSize,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          icon: "roundRect",
          data: n.legend_data,
          right: "0",
          top: "0",
          textStyle: {
            //图例文字的样式
            color: "white",
            fontSize: that.fontSize,
          },
        },

        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "24%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xdata,
            smooth: 0.6,
            symbol: "none",

            lineStyle: {
              color: "#5470C6",
              width: 3,
            },
            axisLabel: {
              interval: 1, //横轴信息全部显示
              textStyle: {
                color: "white",
                fontSize:that.fontSize,
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgb(52, 119, 188)",
                width: 2, //这里是为了突出显示加上的
              },
            },

            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgb(26, 158, 209)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgb(52, 119, 188)",
                width: 2, //这里是为了突出显示加上的
              },
            },

            // max: 500, // 设置y轴刻度的最大值
            nameTextStyle: {
              color: "white",
              fontSize: that.fontSize,

              padding: [0, 0, 0, 100],
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgb(26, 158, 209)",
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "inside", //详细配置可见echarts官网
            show: false, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 1000, //伸缩条结束位置（1-100），可以随时更改
          },
        ],
        series: series,
        series1: [
          {
            name: n.series[0].name,
            type: "line",
            stack: "总量",
            // areaStyle: {},
            emphasis: {
              focus: "none",
            },
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#5470C6",
              width: 3,
            },
            itemStyle: {
              normal: {
                color: "rgb(17, 193, 239)", //折点颜色
                lineStyle: {
                  color: "rgb(17, 193, 239)", //折线颜色
                },
              },
            },
            data: n.series[0].data,
          },
          {
            name: n.series[1].name,
            type: "line",
            stack: "总量",
            // areaStyle: {},
            emphasis: {
              focus: "none",
            },
            itemStyle: {
              normal: {
                color: "rgb(210, 229, 120)", //折点颜色
                lineStyle: {
                  color: "rgb(210, 229, 120)", //折线颜色
                },
              },
            },
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#5470C6",
              width: 3,
            },

            data: n.series[1].data,
          },
        ],
      };
      // 绘制图表
      options && myChart.setOption(options);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  mounted() {
    this.drawLine(this.list[0]);
  },
};
</script>
<style lang="less" scoped>
.echart {
  width: 100%;
  height: 100%;
}
.font {
  font-size: 0.313vw;
  color: white;
}
</style>
